<!--
 * @Descripttion: 编辑卡券
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @LastEditTime: 2023-03-27 17:38:51
-->
<template>
  <div class="lb-market-edit">
    <top-nav :title="navTitle" :isBack="true" />
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="120px"
      >
	  <el-form-item label="分类" prop="title">
	  	<el-select v-model="subForm.cate_id" placeholder="请选择一级分类" required @change="firstChange">
	  		<el-option v-for="item in firstlist" :key="item.id" :label="item.title" :value="item.id">
	  		</el-option>
	  	</el-select>
	  </el-form-item>
        <el-form-item label="卡券名称" prop="title">
          <el-input
            v-model="subForm.title"
            maxlength="20"
            show-word-limit
            placeholder="请输入卡券名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="使用条件" prop="type">
          <el-radio-group
            v-model="subForm.type"
            @change="redMarketChange($event, 'type')"
          >
            <el-radio :label="0">消费满</el-radio>
            <el-radio :label="1">无门槛</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="full">
          <block v-if="subForm.type === 0">
            消费满
            <el-input
              v-model="subForm.full"
              placeholder="请输入消费金额"
              style="width: 130px"
            ></el-input>
          </block>
          {{ subForm.type === 0 ? '元可用' : '立减' }}
          <el-input
            v-model="subForm.discount"
            placeholder="请输入优惠金额"
            style="width: 130px"
          ></el-input>
          <block v-if="subForm.type === 1">元</block>
        </el-form-item>
        <el-form-item label="使用规则" prop="rule">
          <el-input
            type="textarea"
            :rows="10"
            maxlength="1000"
            resize="none"
            show-word-limit
            placeholder="请输入使用规则"
            v-model="subForm.rule"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠详情" prop="text">
          <el-input
            type="textarea"
            :rows="10"
            maxlength="1000"
            resize="none"
            show-word-limit
            placeholder="请输入优惠详情"
            v-model="subForm.text"
          ></el-input>
        </el-form-item>

        <el-form-item label="派发方式" prop="send_type">
          <el-radio-group
            v-model="subForm.send_type"
            :disabled="subForm.id ? true : false"
            @change="redMarketChange($event, 'send_type')"
          >
            <el-radio :label="0">活动派发</el-radio>
            <el-radio :label="2">用户领取</el-radio>
            <el-radio :label="1">平台定向派发</el-radio>
          </el-radio-group>
          <lb-tool-tips>
            <div>
              活动派发：需要参与活动，活动参与成功之后系统自动派发到用户的卡包
            </div>
            <div class="mt-sm">平台定向派发：平台指定派发到用户的卡包</div>
          </lb-tool-tips>
        </el-form-item>
        <el-form-item
          label="领取身份"
          prop="user_limit"
          v-if="subForm.send_type == 2"
        >
          <el-radio-group v-model="subForm.user_limit">
            <el-radio :label="1">不限制，任何人可领取</el-radio>
            <el-radio :label="2">仅限新用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="卡券库存"
          prop="stock"
          v-if="subForm.send_type == 2"
        >
          <el-input-number
            class="lb-input-number"
            :min="0"
            :controls="false"
            v-model="subForm.stock"
            placeholder="请输入卡券数量"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="使用时间" prop="time_limit">
          <el-radio-group v-model="subForm.time_limit">
            <el-radio :label="0">指定日期</el-radio>
            <el-radio :label="1">有效天数</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label prop="start_time" v-if="subForm.time_limit === 0">
          <el-date-picker
            v-model="subForm.start_time"
            type="datetime"
            value-format="timestamp"
            placeholder="选择开始日期时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label prop="end_time" v-if="subForm.time_limit === 0">
          <el-date-picker
            v-model="subForm.end_time"
            type="datetime"
            value-format="timestamp"
            placeholder="选择结束日期时间"
          ></el-date-picker>
          <lb-tool-tips>领取的卡券必须在该时间前使用</lb-tool-tips>
        </el-form-item>
        <el-form-item label prop="day" v-if="subForm.time_limit === 1">
          <em class="text-normal">自领券当日起</em>
          <el-input-number
            v-model="subForm.day"
            class="lb-input-number mini"
            :controls="false"
            :min="1"
            :precision="0"
          ></el-input-number>
          <em class="text-normal">天内可用</em>
          <lb-tool-tips
            >有效期按自然天计算。
            <div class="mt-sm mb-sm">
              举例：如设置领券当日起30天内可用，用户在5月18日14:00时领取卡券，则该卡券的可用时间为5月18日的14:00:00至6月18日的14:00
            </div>
            注意：时间按自然天来算，不是月
          </lb-tool-tips>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            :min="0"
            :controls="false"
            v-model="subForm.top"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item label="限用服务" prop="service">
          <lb-button type="primary" icon="el-icon-plus" @click="toShowDialog"
            >选择服务</lb-button
          >
          <el-table
            :data="subForm.service"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            class="mt-lg"
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="title" label="服务名称"></el-table-column>
            <el-table-column prop="price" label="服务价格"></el-table-column>
            <el-table-column width="180" label="操作">
              <template slot-scope="scope">
                <div class="table-operate">
                  <lb-button
                    size="mini"
                    plain
                    type="danger"
                    @click="confirmDel(scope.row.id)"
                    >{{ $t('action.delete') }}</lb-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitForm" v-preventReClick>{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="$router.back(-1)">{{
            $t('action.back')
          }}</lb-button>
        </el-form-item>
      </el-form>

      <el-dialog
        title="限用服务"
        :visible.sync="showDialog"
        width="800px"
        center
      >
        <el-form
          :inline="true"
          :model="searchForm"
          ref="searchForm"
          label-width="70px"
        >
          <el-form-item label="输入查询" prop="name">
            <el-input
              v-model="searchForm.name"
              placeholder="请输入服务名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <lb-button
              size="medium"
              type="primary"
              icon="el-icon-search"
              style="margin-right: 5px"
              @click="getTableDataList(1)"
              >{{ $t('action.search') }}</lb-button
            >
            <lb-button
              size="medium"
              icon="el-icon-refresh-left"
              style="margin-right: 5px"
              @click="resetForm('searchForm')"
              >{{ $t('action.reset') }}</lb-button
            >
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          ref="multipleTable"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="title" label="服务名称"></el-table-column>
          <el-table-column prop="price" label="服务价格"></el-table-column>
        </el-table>
        <lb-page
          :batch="false"
          :page="searchForm.page"
          :pageSize="searchForm.limit"
          :total="total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        >
        </lb-page>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleDialogConfirm"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    let validateStartTime = (rule, value, callback) => {
      if (this.subForm.time_limit === 0) {
        if (value.length === 0) {
          callback(new Error('请选择开始时间'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    let validateEndTime = (rule, value, callback) => {
      if (this.subForm.time_limit === 0) {
        if (value.length === 0) {
          callback(new Error('请选择到期时间'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    let validateFull = (rule, value, callback) => {
      let regRule =
        /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
      if (this.subForm.type === 0) {
        if (!regRule.test(value)) {
          callback(new Error('请输入消费金额'));
        } else {
          if (!regRule.test(this.subForm.discount)) {
            callback(new Error('请输入优惠金额'));
          } else if (value * 1 < this.subForm.discount * 1) {
            callback(new Error('优惠金额不能大于消费金额'));
          } else {
            callback();
          }
        }
      } else if (this.subForm.type === 1) {
        if (!regRule.test(this.subForm.discount)) {
          callback(new Error('请输入优惠金额'));
        } else {
          callback();
        }
      }
    };
    return {
      navTitle: '',
      subForm: {
        id: 0,
        title: '',
        stock: '',
        type: 0,
        full: '',
        discount: '',
        rule: '',
        text: '',
        time_limit: 0,
        user_limit: 1,
        day: 1,
        end_time: '',
        start_time: '',
        send_type: 0,
        status: 1,
        service: [],
        top: 0,
		cate_id:""
      },
      send_type2Rules: {
        stock: {
          required: true,
          type: 'number',
          message: '请输入卡券库存',
          trigger: 'blur',
        },
        user_limit: {
          required: true,
          message: '请选择领取身份',
          trigger: 'blur',
        },
      },
      send_typeRules: {
        title: {
          required: true,
          message: '请输入卡券名称',
          trigger: 'blur',
        },

        type: {
          required: true,
          message: '请选择使用条件',
          trigger: 'blur',
        },
        full: { validator: validateFull, trigger: 'change' },
        rule: {
          required: true,
          type: 'string',
          message: '请输入使用规则',
          trigger: 'blur',
        },
        text: {
          required: true,
          type: 'string',
          message: '请输入优惠详情',
          trigger: 'blur',
        },
        send_type: {
          required: true,
          message: '请选择派发方式',
          trigger: 'blur',
        },
        time_limit: {
          required: true,
          message: '请选择使用时间',
          trigger: 'blur',
        },

        start_time: { validator: validateStartTime, trigger: 'change' },
        end_time: { validator: validateEndTime, trigger: 'change' },
        top: {
          required: true,
          type: 'number',
          message: '请输入排序值',
          trigger: 'blur',
        },
        service: {
          required: true,
          type: 'array',
          message: '请选择限用服务',
          trigger: 'blur',
        },
      },
      subFormRules: {},
      searchForm: {
        page: 1,
        limit: 10,
        status: 1,
        name: '',
        cate_id:'',
      },
      total: 0,
      loading: false,
      tableData: [],
      multipleSelection: [],
      showDialog: false,
	  firstlist:[]
    };
  },
  watch: {
    'subForm.send_type': {
      handler (val, oldVal) {
        this.subFormRules = this.send_typeRules;
        if (val == 2) {
          this.subFormRules = {
            ...this.send_typeRules,
            ...this.send_type2Rules,
          };
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  created () {
	  this.$api.service.lastCate({
	  	level: 1,
      type:1
	  }).then(res => {
	  	if (res.code == 200) {
			console.log(res,'大萨达湿哒哒收到')
	  		this.firstlist = res.data
	  	}
	  })
    this.subFormRules = this.send_typeRules;
    let { id = 0 } = this.$route.query;
    this.subForm.id = id;
    this.navTitle = this.$t(
      id ? 'menu.MarketCouponEdit' : 'menu.MarketCouponAdd'
    );
    if (!id) return;
    this.getDetail();
	
  },
  methods: {
    firstChange(e){
      console.log(e,'---------');
      this.searchForm.cate_id = e
      this.getTableDataList(1)
    },
    /**
     * @name: 详情
     * @param {*}
     */
    async getDetail () {
      let { id } = this.subForm;
      let { code, data } = await this.$api.market.couponInfo({ id });
      if (code !== 200) return;
      data.start_time = data.start_time ? data.start_time * 1000 : '';
      data.end_time = data.end_time ? data.end_time * 1000 : '';
      for (let key in this.subForm) {
        this.subForm[key] = data[key];
      }
    },
    async toShowDialog () {
      await this.getTableDataList();
      this.showDialog = !this.showDialog;
    },
    resetForm (form) {
      this.$refs[form].resetFields();
      this.getTableDataList(1);
    },
    handleSizeChange (val) {
      this.searchForm.limit = val;
      this.handleCurrentChange(1);
    },
    handleCurrentChange (val) {
      this.searchForm.page = val;
      this.getTableDataList();
    },
    async getTableDataList (flag) {
      if (flag) this.searchForm.page = 1;
      this.tableData = []
      this.loading = true;
      let { code, data } = await this.$api.service.serviceList(
        this.searchForm
      );
      this.loading = false;
      if (code !== 200) return;
      this.tableData = data.data;
      this.total = data.total;
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    handleDialogConfirm () {
      let service = JSON.parse(JSON.stringify(this.subForm.service));
      let arr1 =
        service.length > 0
          ? service.map((item) => {
            return item.id;
          })
          : [];
      this.multipleSelection.map((item) => {
        if (arr1.includes(item.id)) return;
        service.push(item);
      });
      this.subForm.service = service;
      this.showDialog = false;
    },
    confirmDel (id) {
      let index = this.subForm.service.findIndex((item) => {
        return item.id === id;
      });
      this.subForm.service.splice(index, 1);
    },
    /**
     * @name: 新增/编辑
     * @param {*}
     */
    submitForm () {
      this.$refs['subForm'].validate((valid) => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.subForm))
          let methodModel = subForm.id ? 'couponUpdate' : 'couponAdd'

          subForm.start_time = subForm.time_limit === 0 ? subForm.start_time / 1000 : ''
          subForm.end_time = subForm.time_limit === 0 ? subForm.end_time / 1000 : ''
          subForm.day = subForm.time_limit === 0 ? '' : subForm.day

          let arr = subForm.service.map((item) => {
            return item.id
          })
          subForm.service = arr

          this.$api.market[methodModel](subForm).then((res) => {
            if (res.code === 200) {
              this.$message.success(this.$t(subForm.id ? 'tips.successRev' : 'tips.successSub'))
              this.$router.back(-1)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-market-edit {
  .page-main {
    .el-form-item {
      margin-bottom: 24px;
    }
    .last-form-item {
      margin-top: 30px;
    }
    .item-tips {
      margin-left: 120px;
      margin-bottom: 24px;
      color: #999999;
    }
    .el-input,
    .el-input-number,
    .el-cascader,
    .el-select {
      width: 300px;
    }
    .el-input-number.mini {
      width: 100px;
    }
    .el-textarea {
      width: 600px;
    }
  }
}
</style>
